<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>柠檬测</title>
        <link href="title.png" rel="shortcut icon"/>
        <link type="text/css" rel="stylesheet" href="css/foundation.css"/>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation/foundation.js"></script>
        <script src="js/foundation/foundation.offcanvas.js"></script>
        <script type="text/javascript" >
            $(document).ready(function(){
                $(document).foundation();
                $(document).foundation('offcanvas', 'reflow');
            });
        </script>
    </head>
    <body>
        <div class="off-canvas-wrap" data-offcanvas> 
            <div class="inner-wrap"> 
                <nav class="tab-bar"> 
                    <section class="middle tab-bar-section"> 
                        <h1 class="title">导航条</h1> 
                    </section> 
                    <div class="right-small"> 
                        <a href="#idOfRightMenu" role="button" aria-controls="idOfRightMenu" aria-expanded="false" class="right-off-canvas-toggle menu-icon" ><span></span></a>
                    </div> 
                </nav> 
<!-------------------nav导航栏的右边多级菜单------------------------>
                <aside class="right-off-canvas-menu">
                  <ul class="off-canvas-list">
                    <li><label>Users</label></li>
                    <li><a href="#">Hari Seldon</a></li>
                    <li class="has-submenu"><a href="#">R. Giskard Reventlov</a>
                        <ul class="right-submenu">
                            <li class="back"><a href="#">Back</a></li>
                            <li><label>Level 1</label></li>
                            <li><a href="#">Link 1</a></li>
                            <li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
                                <ul class="right-submenu">
                                    <li class="back"><a href="#">Back</a></li>
                                    <li><label>Level 2</label></li>
                                    <li><a href="#">...</a></li>
                                </ul>
                            </li>
                            <li><a href="#">...</a></li>
                        </ul>
                    </li>
                    <li><a href="#">...</a></li>
                  </ul>
                </aside>
<!--------------- 操作的内容 ----------------------->
                <section class="main-section">
                    <p>这里是要加入的操作页面区域</p>

                </section>
<!--------------------------返回页面，exit离开菜单（必须有的）---------------->
              <a class="exit-off-canvas"></a>
            </div> 
        </div>
    </body>
</html>

